<template>
  <div class="footer-main">
    <img src="@/assets/wlgs.jpg" alt="" />
    <div class="right">
      <div class="menu-box">
        <div
          class="item"
          @click="bindClick(item)"
          v-for="item of menuList"
          :key="item.name"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="icp">
        <span>Copyright </span>
        <span>©2004-2021 {{ host }} All Rights Reserved </span>
        <span>©</span>
        <a href="http://beian.miit.gov.cn" target="_blank">{{homeConfigStore.value.icp}}</a>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { HomeConfigStore } from "@/stores/main";
import { defineComponent, ref } from "vue";
import router from "@/route";
const menus = [
  {
    name: "产品服务",
    path: "/home",
  },
  {
    name: "诚聘英才",
    path: "/home",
  },
  {
    name: "隐私保护",
    path: "/home",
  },
  {
    name: "意见建议",
    path: "/home",
  },
  {
    name: "今日新闻",
    path: "/about",
  },
  {
    name: "测试入口",
    path: "/debug/index",
  },
];
export default defineComponent({
  props: {
    icp: String,
  },
  setup(props) {
    const menuList = ref(menus);
    const host = ref(window.location.host);
    const bindClick = (item:any) => {
      console.log(item);
      
      router.replace({
        path: item.path,
      });
    };
    const homeConfigStore = HomeConfigStore();
    return { menuList, host, bindClick,homeConfigStore };
  },
});
</script> 
<style scoped lang="less">
.footer-main {
  border-top: solid 1px @borderColor;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1px 0 12px 0;
  img {
    width: 52px;
    height: auto;
    margin-right: 5px;
  }
  .menu-box {
    margin: 14px 0;
    display: flex;
    .item {
      padding: 0 6px;
      cursor: pointer;
      font-size: 14px;
      color: @textColor;
    }
    .item + .item {
      border-left: solid 1px @textColor;
    }
  }
  .icp {
    display: flex;
    align-items: center;
    color: #999aaa;
    font-size: 12px;
    line-height: 20px;
    a {
      color: @textColor;
    }
  }
}
</style>

